<template>
  <div class="header">
    <div class="header-left iconfont">&#xe658;</div>
    <div class="header-input">
      <span class="iconfont">&#xe63c;</span>
      输入城市/游玩主题/景点
    </div>
    <router-link to="/city" class="header-router-right">
      <div class="header-right">{{this.city}}
      <span class="iconfont">&#xe65c;</span>
      </div>
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'HomeHeader',
  props: {
    city: String
  }
}
</script>

<style lang="stylus" scoped>
  @import "../../../assets/styles/variables.styl"
  .header
    height $Headerheight
    line-height : $Headerheight
    display flex
    background $bgColor
    color #ffffff
    .header-left
      width .64rem
      float left
      text-align center
      font-size .4rem
    .header-router-right
      float right
      .header-right
        color #ffffff
        width 1.28rem
        float right
        text-align center
    .header-input
      flex 1
      background #ffffff
      margin-top .12rem
      margin-left .2rem
      height .6rem
      border-radius .1rem
      color #cccccc
      line-height .6rem
      padding-left .14rem
</style>
